<template>
  <div id="app">
    <div class="nav">
      <router-link style="border-top-left-radius:5px;" class="navlist" to="/">首页</router-link>
      <router-link class="navlist" :to="{path:'/string'}">string(字符串)</router-link>
      <router-link class="navlist" to="/hash">hash(哈希)</router-link>
      <router-link class="navlist" to="/list">list(列表)</router-link>
      <router-link class="navlist" to="/set">set(集合)</router-link>
      <router-link class="navlist" to="/zset">zset(有序集合)</router-link>
    </div>
    <router-view/>
  </div>
</template>

<script>

export default {
  name: 'app',
  components: {
  }
}
</script>

<style lang="stylus">
body
  padding 0;
  margin 0;
#app
  font-family 'Avenir', Helvetica, Arial, sans-serif
  -webkit-font-smoothing antialiased
  -moz-osx-font-smoothing grayscale
  text-align center
  color #227AD6
  width 1000px;
  margin 0 auto;
  position relative
  padding 0;
  height 650px;
  border 1px solid #227AD6;
  margin-top 10px;
  border-radius 5px

.nav
  width 1000px;
  position absolute;
  top 0;
  height 50px;
  font-size 14px;
  left 0;
  z-index 100;
  background #227AD6;
  margin 0 auto;
  font-weight bolder;
  .navlist
    width 150px;
    float left
    text-align center
    height 50px;
    line-height 50px;
    padding 0;
    color #fff;
    text-decoration none;
    &.router-link-exact-active{
      color #227AD6;
      background #fff;
      text-decoration none;
}
</style>
